<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, 
		initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>Insert title here</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<style>
			.tab{
				line-height:40px;
				color:silver;
			}
			.tab.active{
				color:white;
				background-color:#18B2ED;
			}
			#aside_container aside {
				background: #333;
			}

			#section_container_mask {
				background-color: #000;
				opacity: .3;
			}
			aside ul li div{
				line-height:30px;font-size:1.5em;padding:10px
			}
			#slider_page .slide{
				height:300px;
			} 
		</style>
	</head>
	<body>
		<div id="aside_container">
			<aside id="left_aside" data-position="left" data-transition="push">
				<div>
					<ul>
						<li >
							<div >功能1</div>
						</li>
						<li>
							<div >功能2</div>
						</li>
						<li>
							<div >功能3</div>
						</li>
					</ul>
				</div>
			</aside>
			<aside id="right_aside" data-position="right" data-transition="push">
				<div>
					<ul>
						<li data-href='ajax.uixml'>
							<div >ajax</div>
						</li>
						<li data-href='uixmlmain.uixml'>
							<div >uixml主页</div>
						</li>
						<li data-href='photo.uixml'>
							<div >拍照</div>
						</li>
					</ul>
				</div>
			</aside>
		</div>
		<div id="section_container">
			<section id="main_section" data-role="section" class="active">
				<header>
					<div class="titlebar text-center" style="background-color:#18B2ED">
						<h2>欢迎</h2>
						<a class="right" data-toggle="aside" href="#right_aside">
							<i class="icon icon-menu-fill" style="color:white"></i>
						</a>
					</div>
				</header>
				<article id="main" data-transition="slide" data-role="article" class="active">
					hellow world!
					<hr />
					<div id="page_slider" data-role="slider">
						<div class="scroller">
							<div id="slider1" class="slide" data-role="page" style="height:300px">
								滑动页面1
							</div>
							<div id="slider2" class="slide" data-role="page" style="height:300px">
								滑动页面2
							</div>
							<div id="slider3" class="slide" data-role="page" style="height:300px">
								滑动页面3
							</div>
						</div>
					</div>
					<hr />
					<span id="open_pop" class="button block " style="margin:5px;">popup open</span>
					
				</article>
				<article id="page2" data-transition="slide" data-role="article" class="">
					page2
					<div id="list" data-scroll="pull" style="height:200px">
						<div class="scroller">
							下拉刷新
							<ul id="lst">
								<script id="template" type="text/html">
								<%for(var i=0;i<list.length;i++){%>
								<li style="line-height:30px">
									<%=list[i].title%>
								</li>
								<%}%>
								</script>
							</ul>
						</div>
					</div>
				</article>
				<article id="page3" data-transition="slide" data-role="article" class="">
					page3
					<div id="clientInfo"></div>
				</article>
				<footer>
					<ul class="menubar">
						<li class="tab active" data-role="tab" data-toggle="article" href="#main">
							<label>首页</label>
						</li>
						<li class="tab "  data-role="tab" data-toggle="article" href="#page2">
							<label>page2</label>
						</li>
						<li class="tab " data-role="tab" data-toggle="article" href="#page3">
							<label>page3</label>
						</li>
					</ul>
				</footer>
			</section>
		</div>
		<script id="popup_template" type="text/html">
		     <div   style="padding:10px 20px;height:300px;">
		         <div style="text-align:center;font-size:20px;color:#3498DB;font-weight:600;margin:5px 0;">登录</div>
		         <input type="text" name="name" class="full-width" placeholder="用户名" style="margin:0px -8px;"><div class="rowspace"></div>
		         <input type="password" name="password" class="full-width" placeholder="密码" style="margin:0px -8px;"><div class="rowspace"></div>
		         <button class="width-full">登录</button>
		         <div id="main_popup" data-scroll="verticle" style="height:100px;position:relative;" data-scroll-options="{fadeScrollbars:false}">
		         <div class="scroller">
		         <ul class="list">
		         	<li style="line-height:25px">asdasd</li>
		         	<li style="line-height:25px">asdasd</li>
		         	<li style="line-height:25px">asdasd</li>
		         	<li style="line-height:25px">asdasd</li>
		         	<li style="line-height:25px">asdasd</li>
		         	<li style="line-height:25px">asdasd</li>
		         	<li style="line-height:25px">asdasd</li>
		         </ul>
		         </div>
		         </div>
		     </div>
		</script>
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<script src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/agile/js/agile.js"></script>
		<script src="../assets/app/js/app.seedsui.js"></script>
		<script src="../assets/bridge/agile.exmobi.js"></script>
		<script src="../assets/bridge/exmobi.js"></script>
		<script>
		    var openNative = false;
		    $(document).on('plusready',function(){
		    	//alert('exmobi ready')
		    	openNative = function(url){
		    		//alert(url);
		    		A.Controller.nativepage('res:page/'+url)
		    	}
		    	
		    	var html = 'clientid : '+ClientUtil.getClientId()+'</br>'
		    	           +'esn : '+DeviceUtil.getEsn()
		    	$('#clientInfo').html(html)
		    	
		    })
		    
			$(function(){
				A.Slider('#page_slider',{dots:'right'})
				$('#right_aside li').on(A.options.clickEvent,function(){
					//alert(openNative)
					A.Controller.back()
					if (openNative){
						var url = $(this).attr('data-href')
						openNative(url)
					}else{
						alert('宿主非exmobi')
					}
				})
				
				$('#open_pop').on('click',function(){
				   var tmppop = new A.Popup({
			   	   	html: $('#popup_template').html(),
			           css : {width:'auto'},
			           pos : 'center',
			           isBlock :false
			       }).on('popupopen', function(){
			       	setTimeout(function(){
			       	 var nsc = A.Scroll('#main_popup')
			       	 nsc.destroy()
			       	 nsc.refresh()
			       	},50);
			       }).on('popupclose', function(){
			       	 //关闭后的方法
			       });
			       tmppop.open(function(){
			       })
				})
				
				
				$('#list').on('refreshInit',function(){
					var refresh = A.Refresh(this)
					
					refresh.on('pulldown',function(){
						//alert('pulldown');
						var json  = {}
						json.list=[]
						for(var i=0;i<10;i++){
							var item = {}
							item.title = '标题'+(i+1)
							json.list.push(item)
						}
						A.template('#template').renderBefore(json,function(){
							alert('finish')
						})
						//alert(html)
						//$('#lst').html(html)
						refresh.refresh()
					})
					
					refresh.on('pullup',function(){
						alert('pullup');
						
						$('#lst').append('\
								<li style="line-height:30px;">\
									来自下面\
								</li>')
					})
					
				})
			})
		</script>
	</body>
</html>